<template>
	<view class="page_box">
		<u-navbar :is-back="true" title=" " v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			<view class="bg-img img padding  flex flex-direction justify-center">
				<text class="f40 text-bold">修改手机号</text>
			</view>
			
			<u-form :model="form" ref="uForm">
				<u-form-item :border-bottom="false" prop="tel">
					<view class="form-content padding">
						<view class="flex align-center">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_tel.png" class="ico_tel"></image>
							<text class="margin-left-sm">新手机号</text>
						</view>
						<view class="u-border-bottom margin-top-lg padding-bottom flex justify-between align-center">
							<u-input 
								v-model="form.tel" 
								type="number" 
								:clearable="false" 
								:border="false" 
								placeholder="请输入您当前绑定的手机号" 
								placeholder-style="color:#BDBDBD;font-size: 24rpx;"
								class="form-input"
							/>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" prop="verificationCd">
					<view class="form-content padding">
						<view class="flex align-center">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_yzm.png" class="ico_yzm"></image>
							<text class="margin-left-sm">验证码</text>
						</view>
						<view class="u-border-bottom margin-top-lg padding-bottom flex justify-between align-center">
							<u-input
								v-model="form.verificationCd" 
								type="number" 
								:clearable="false" 
								:border="false" 
								placeholder="请输入手机验证码" 
								placeholder-style="color:#BDBDBD;font-size: 24rpx;"
								class="form-input"
								style="width: 60%;"
							/>
							<text class="text-yellow f26" @click="verificationCode">{{vercode}}</text>
						</view>
					</view>			
				</u-form-item>
				<u-form-item :border-bottom="false">
					<view class="form-content padding margin-top-lg">
						<button class="login-btn circle-btn" @click="sumBind">提交</button>
					</view>			
				</u-form-item>
			</u-form>
		</view>
		
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			vercode:'获取验证码',
			checked:true,
			form:{
				tel:'',
				verificationCd:'',
			},
			rules: {
				tel: [
					{ 
						required: true, 
						message: '请输入手机号', 
						trigger: ['blur'],
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur'],
					}
				],
				verificationCd: [
					{
						required: true, 
						message: '请输入手机验证码', 
						trigger: 'blur'
					}
				],
			},
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onShow() {},
	onLoad(e) {},
	methods: {
		verificationCode(){
			if(this.vercode === '获取验证码' || this.vercode === '重新获取'){
				let timenum = 60
				var timer = setInterval(()=>{
					if(timenum === 0){
						clearInterval(timer)
						this.vercode = '重新获取'
					}else{
						timenum --
						this.vercode = timenum + 's'
					}			
				},1000)
			}
		},
		sumBind(){
			this.$refs.uForm.validate(valid => {
				if (valid) {
					uni.showToast({
						title: '修改成功',
						icon:"none"
					});
					setTimeout(()=>{
						uni.navigateBack({
						    delta: 2
						});
					},1000)								
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content_box {
	.img {
		width: 100vw;
		height: 200rpx;
	}
	.form-content{
		padding-bottom: 0;
	}
	.ico_tel{
		width: 26rpx;
		height: 38rpx;
	}
	.form-input{
		padding-left: 46rpx;
	}
	.ico_yzm{
		width: 30rpx;
		height: 36rpx;
	}
	.ico_yj{
		width: 20rpx;
		height: 12rpx;
	}
	.ico_pas{
		width: 28rpx;
		height: 38rpx;
	}
	button::after{
		border: 0;
	}
	.circle-btn{
		border-radius: 45rpx;
		font-size: 30rpx;
		font-weight: 500;
		line-height: 90rpx;
	}
	.login-btn{
		background: #4a515b;
		color: #FFFFFF;
	}
	.privacy-bottom{
		margin: 50rpx 0 50rpx;
	}

	

	

	

	
}
</style>